import { Component } from '@angular/core';
import { SFSchema } from '@delon/form';
import { _HttpClient, SettingsService } from '@delon/theme';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { Api } from 'src/app/shared/api/api';
import { ResponseCode } from 'src/app/shared/response.code';
@Component({
  selector: 'app-security-email-bind',
  template: `<div class="modal-header">
      <div class="modal-title">绑定邮箱</div>
    </div>
    <nz-spin *ngIf="!record" class="modal-spin"></nz-spin>
    <sf *ngIf="record" #sf mode="edit" [schema]="schema" [formData]="record" button="none">
      <ng-template sf-template="email" let-i let-ui="ui" let-schema="schema">
        <div nz-row>
          <div nz-col [nzSpan]="16">
            <input
              nz-input
              [attr.id]="i.id"
              [disabled]="i.disabled"
              [attr.disabled]="i.disabled"
              [nzSize]="i.size"
              [ngModel]="i.value"
              (ngModelChange)="i.setValue($event)"
            />
          </div>
          <div nz-col [nzSpan]="8">
            <button nz-button type="button" nzType="link" (click)="sendEmailCode(i)">{{ ui.btnText }}</button>
          </div>
        </div>
      </ng-template>
      <div class="modal-footer">
        <button nz-button type="button" (click)="close()">关闭</button>
        <button nz-button type="submit" nzType="primary" (click)="save(sf.value)" [disabled]="!sf.valid" [nzLoading]="http.loading"
          >确认修改</button
        >
      </div>
    </sf>`
})
export class BindEmailComponent {
  record: any = {};
  schema: SFSchema = {
    properties: {
      email: {
        type: 'string',
        title: '邮箱',
        format: 'email',
        ui: {
          widget: 'custom',
          btnText: '发送验证码'
        }
      },
      code: { type: 'string', title: '验证码', minLength: 6 }
    },
    required: ['oldPwd', 'newPwd', 'confirm']
  };

  constructor(private modal: NzModalRef, public settings: SettingsService, private msgSrv: NzMessageService, public http: _HttpClient) {}

  sendEmailCode(e: any) {
    if (e.value && !e.showError) {
      this.http.post(`${Api.BaseUserApi}email/code`, null, { email: e.value }).subscribe((res: any) => {
        if (res) {
          if (res.code === ResponseCode.SUCCESS) {
            this.msgSrv.success('发送成功，请至邮箱中查看');
            // this.modal.close(true);
          } else {
            this.msgSrv.warning(res.data);
          }
        } else {
          this.msgSrv.error('失败，未知错误');
        }
      });
    } else {
      this.msgSrv.error('请输入正确的邮箱');
    }
  }

  save(value: any) {
    console.log(value);
    const id = this.settings.user['id'];
    this.http.put(`${Api.BaseUserApi}email/bind/`, null, value).subscribe((res: any) => {
      if (res) {
        if (res.code === ResponseCode.SUCCESS) {
          this.msgSrv.success('成功');
          this.modal.close(true);
        } else {
          this.msgSrv.warning(res.data);
        }
      } else {
        this.msgSrv.error('失败，未知错误');
      }
    });
  }

  close() {
    this.modal.destroy();
  }
}
